<template>
	<div class="card">
		<div>
			矩形裁剪
			<div class="container p-4">
				<div class="cropper-container mr-10">
					<CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
				</div>
				<img :src="cropperImg" class="croppered" v-if="cropperImg" alt="" />
			</div>
			<p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
		</div>

		<div>
			圆形裁剪
			<div class="container p-4">
				<div class="cropper-container mr-10">
					<CropperImage ref="refCropper" :src="img" @cropend="handleCircleCropend" style="width: 40vw" circled />
				</div>
				<img :src="circleImg" class="croppered" v-if="circleImg" />
			</div>
			<p v-if="circleImg">裁剪后图片信息：{{ circleInfo }}</p>
		</div>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { ref } from 'vue'
import CropperImage from '@/components/Cropper/index.vue'

const img = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
const info = ref('')
const cropperImg = ref('')
const circleInfo = ref('')
const circleImg = ref('')

const handleCropend = ({ imgBase64, imgInfo }: { imgBase64: string; imgInfo: string }) => {
	info.value = imgInfo
	cropperImg.value = imgBase64
}
const handleCircleCropend = ({ imgBase64, imgInfo }: { imgBase64: string; imgInfo: string }) => {
	circleInfo.value = imgInfo
	circleImg.value = imgBase64
}
</script>

<style scoped lang="scss"></style>
